<template>
  <div class="service-data-board">
    <el-row :gutter="16" class="kpi-row">
      <el-col :span="6"><el-card><div class="kpi-title">今日会话数</div><div class="kpi-value">{{ kpi.todaySession }}</div></el-card></el-col>
      <el-col :span="6"><el-card><div class="kpi-title">今日工单数</div><div class="kpi-value">{{ kpi.todayTicket }}</div></el-card></el-col>
      <el-col :span="6"><el-card><div class="kpi-title">平均响应时长</div><div class="kpi-value">{{ kpi.avgResponseTime }} min</div></el-card></el-col>
      <el-col :span="6"><el-card><div class="kpi-title">满意度</div><div class="kpi-value">{{ kpi.satisfaction }}%</div></el-card></el-col>
    </el-row>
    <el-row :gutter="16" style="margin-top:24px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">会话/工单趋势</div>
          <v-chart :option="sessionTicketOption" autoresize style="height:320px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">满意度趋势</div>
          <v-chart :option="satisfactionOption" autoresize style="height:320px;" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="16" style="margin-top:24px;">
      <el-col :span="24">
        <el-card>
          <div class="chart-title">客服绩效排行</div>
          <v-chart :option="staffRankOption" autoresize style="height:320px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElCard, ElRow, ElCol } from 'element-plus'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 更丰富的mock数据
const kpi = ref({
  todaySession: 142,
  todayTicket: 67,
  avgResponseTime: 2.8,
  satisfaction: 96.3
})

const sessionTicketOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['会话数', '工单数'] },
  xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] },
  yAxis: { type: 'value' },
  series: [
    { name: '会话数', type: 'line', data: [120, 145, 132, 160, 110, 180, 142] },
    { name: '工单数', type: 'line', data: [60, 70, 68, 80, 55, 90, 67] }
  ]
})

const satisfactionOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] },
  yAxis: { type: 'value', min: 90, max: 100 },
  series: [
    { name: '满意度', type: 'line', data: [97.5, 96.8, 97.2, 95.9, 96.3, 98.1, 96.3], smooth: true }
  ]
})

const staffRankOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['会话数', '工单数', '满意度'] },
  xAxis: { type: 'category', data: ['张三','李四','王五','赵六','钱七'] },
  yAxis: { type: 'value' },
  series: [
    { name: '会话数', type: 'bar', data: [120, 110, 98, 80, 70] },
    { name: '工单数', type: 'bar', data: [60, 55, 50, 40, 35] },
    { name: '满意度', type: 'line', data: [98, 97, 97.5, 96, 95], yAxisIndex: 0 }
  ]
})
</script>

<style scoped>
.service-data-board { padding: 24px; }
.kpi-row .el-card { text-align: center; }
.kpi-title { font-size: 14px; color: #888; margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: bold; color: #222; }
.chart-title { font-size: 16px; font-weight: 500; margin-bottom: 12px; }
</style> 